@if (modelProvider()) {
  <copilot-provider [providerId]="modelProvider().id" class="shadow-sm mb-2 rounded-xl border-[0.5px] border-black/5"
    (deleted)="removedModelProvider()"
    (addedModel)="onAddedModel($event)"
    />
} @else {
  <div class="w-full flex items-center px-3 py-2 mb-2 rounded-lg text-base text-text-secondary bg-gray-200 cursor-pointer hover:bg-gray-300 hover:text-text-primary"
    (click)="openAiProviders()"
  >
    <div class="grow mr-2 leading-5">
      {{'PAC.Copilot.SelectAiModelProvider' | translate: {Default: 'Select an AI model provider'} }}
    </div>
    <i class="ri-folder-open-line"></i>
  </div>
}

<form [formGroup]="formGroup" class="relative w-full flex flex-col items-start gap-4 p-4 overflow-hidden bg-gray-50 rounded-xl shadow-sm border-light"
  (ngSubmit)="onSubmit()">

  <copilot-model-select class="w-full" formControlName="copilotModel" [copilot]="copilot()" [modelType]="defaultModelType()"
    [label]="'PAC.Copilot.DefaultModel' | translate: {Default: 'Default Model'}" />

  <div class="w-full flex flex-col justify-start items-stretch">
    <label>{{ 'PAC.Copilot.TokenLimitPerUser' | translate: {Default: 'Token Limit/User'} }}: {{tokenBalance | number}}</label>
    <mat-slider min="0" max="10000000" step="10000" discrete [displayWith]="formatBalanceLabel">
      <input matSliderThumb formControlName="tokenBalance">
    </mat-slider>
  </div>

  <div class="self-stretch flex justify-start items-center gap-2 mt-4">
    <button mat-flat-button type="button" class="ngm-rounded-full" [disabled]="formGroup.pristine"
      (click)="cancel()">
      {{ 'PAC.KEY_WORDS.Cancel' | translate: {Default: 'Cancel'} }}
    </button>
    <button mat-raised-button color="primary" class="ngm-rounded-full"
      [disabled]="formGroup.invalid || formGroup.pristine || saving()"
    >
      <div class="flex items-center">
        <span>{{ 'PAC.ACTIONS.Save' | translate: {Default: 'Save'} }}</span>
      </div>
    </button>
  </div>

  @if (saving()) {
    <ngm-spin class="absolute top-0 left-0 w-full h-full" ></ngm-spin>
  }
</form>
